<template>
    <div class="newsinfo_container">
        <h3 class="title">{{ newsinfo.article_title }}</h3>
        <p class="subtitle">
            <span>发表时间：{{ newsinfo.add_time }} </span>
            <span>点击量：  {{ newsinfo.article_view_times }} 次</span>
        </p>

        <div class="content" v-html="newsinfo.article_content"></div>

        <!-- 评论子组件区域 -->
        <comment-box :id="this.id"></comment-box>

    </div>
</template>

<script>
// 1、导入 评论 子组件
import comment from '../subcomponents/comment.vue'


export default {
  data() {
    return {
      id: this.$route.params.id, // 将 URL 地址中传递过来的 id 值，挂载到 data 上，方便以后调用
      newsinfo: [],     // 基本信息
    };
  },
  methods: {
      getNewsInfo(){    // 获取新闻详情
        this.$http.jsonp('?s=App.Table.FreeFindOne&model_name=okayapi_article&where=[["id","="," ' + this.id + ' "]]&app_key=4F07D528AB07EE72BD7F7C9263BD6705').then(result => {
            if(result.body.ret === 200){
                // console.log(result.body.data.data)
                this.newsinfo = result.body.data.data
            } else {
                Toast('获取数据出错')
            }
        })
      }
  },
  created(){
      this.getNewsInfo()
  },
  components: {     // 注册子组件的节点
      'comment-box' : comment,
  }
};
</script>

<style lang="less">
.newsinfo_container {
  background-color: #fff;
  .title {
    padding-top: 20px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin: 0;
  }
  .subtitle {
    margin: 0 10px;
    font-size: 12px;
    margin-top: 10px;
    color: #226aff;
    display: flex;
    justify-content: space-between; //两端对齐
  }

  .content {
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
    padding: 20px;
    img{
        width: 100%;
    }
  }
}
</style>
